<!--
 * @Description: 技术分享
 * @Author: zheng yiliang
 * @Date: 2021-05-09 10:59:24
 * @LastEditTime: 2021-05-25 20:50:05
 * @LastEditors: zheng yiliang
-->
<template>
  <div class="col-content">
    <div class="inner" v-show="articles.length || complete">
      <article class="article-list bloglist" id="LAY_bloglist">
        <template v-if="articles.length">
          <section
            v-for="item in articles"
            :key="item._id"
            class="article-item zoomIn article"
          >
            <div class="fc-flag" v-if="item.top">置顶</div>
            <h5 class="title">
              <span class="fc-blue">【{{ item.origin | originFilter }}】</span>
              <router-link :to="`/detail?id=${item._id}`">{{
                item.title
              }}</router-link>
            </h5>
            <div class="time">
              <span class="day">{{ item.create_time | dateSlice('DD') }}</span>
              <span class="month fs-18"
                >{{ item.create_time | dateSlice('MM')
                }}<span class="fs-14">月</span>
              </span>
              <span class="year fs-18 ml10">{{
                item.create_time | dateSlice('YYYY')
              }}</span>
            </div>
            <div class="content">
              <router-link
                :to="`/detail?id=${item._id}`"
                class="cover img-light"
              >
                <img v-lazy="`${item.img_url}`" />
              </router-link>
              {{ item.desc }}
            </div>
            <div class="read-more">
              <router-link
                class="fc-black f-fwb"
                :to="`/detail?id=${item._id}`"
              >
                阅读全文>>
              </router-link>
            </div>
            <aside class="f-oh footer">
              <div class="f-fl tags">
                <span class="fa fa-tags fs-16"></span>
                <a class="tag">{{ item.category[0].name }}</a>
              </div>
              <div class="f-fr">
                <span class="read">
                  <i class="fa fa-eye fs-16"></i>
                  <i class="num">{{ item.meta.views }}</i>
                </span>
                <span class="ml20">
                  <i class="fa fa-comments fs-16"></i>
                  <a href="javascript:void(0)" class="num fc-grey">{{
                    item.meta.comments
                  }}</a>
                </span>
              </div>
            </aside>
          </section>
        </template>
        <null v-else></null>

        <loading
          v-if="articles.length"
          :status="loadStatus"
          @refresh="loadMore"
        ></loading>
      </article>
    </div>
  </div>
</template>

<script>
import { articlesgory, categoryById } from '@/api'
import loading from '@/components/loading'
import { scrollMixin } from '@/mixin'
import { mapState, mapMutations } from 'vuex'
import Null from '@/components/null'
export default {
  name: 'Article',
  components: {
    loading,
    Null
  },
  mixins: [scrollMixin],
  data() {
    return {
      complete: false,
      // articles: [],
      title: '',
      TotCount: 0,
      condition: {
        pagenum: 1,
        pagesize: 5,
        category: undefined
      }
    }
  },
  filters: {
    originFilter(val) {
      if (val === 0) return '原创'
      if (val === 1) return '转载'
      return '混合'
    }
  },
  computed: {
    ...mapState('articles', ['articles'])
  },
  watch: {
    // 监听路由query参数，查询所属分类id下的文章
    '$route.query': {
      handler: async function (query, oldQuery) {
        console.log(query, oldQuery)
        if (oldQuery) {
          if (query.id === oldQuery.id) return
        }
        await this.$nextTick()
        this.condition = {
          pagenum: 1,
          pagesize: 5,
          category: undefined
        }
        this.condition.category = query.id
        this.title = ''
        this.articleQry([])
        const { _RejCode, data } = await articlesgory(this.condition)
        if (_RejCode !== '00000000') return
        if (this.condition.category) {
          this.getCategoryName(this.condition.category)
        } else {
          this.title = '全部文章'
        }
        this.articleQry(data.list)
        if (!this.articles.length) {
          this.loadStatus = '2'
        } else {
          this.loadStatus = '0'
        }
        this.TotCount = data.count
      },
      // 深度观察监听
      immediate: true
    }
  },
  methods: {
    ...mapMutations('articles', ['articleQry']),
    async getCategoryName(id) {
      const { _RejCode, data } = await categoryById(id)
      this.complete = true
      if (_RejCode !== '00000000') return
      console.log(data)
      this.title = data.name
    },
    // 加载更多
    async loadMore() {
      // 加载更多数据
      if (this.loadStatus !== '1') {
        this.condition.pagenum += 1
      }
      await this.$nextTick()
      const { _RejCode, data } = await articlesgory(this.condition)
      if (_RejCode !== '00000000') {
        // 加载失败
        this.loadStatus = '1'
        return
      }
      if (data.list.length <= this.condition.pagesize && data.list.length > 0) {
        if (data.list.length !== this.condition.pagesize) {
          this.loadStatus = '2'
        }
        // this.articles = [...this.articles, ...data.list]
        this.articleQry([...this.articles, ...data.list])
      } else {
        this.loadStatus = '2'
      }
    }
  }
}
</script>
<style lang="scss" scoped>
</style>

